<template>
	<view class="activity">
		<view class="forms">
			<uni-forms ref="form" :modelValue="formData" label-position="top" :rules="rules">
				<uni-forms-item label="活动平台" name="platform" required>
					<uni-easyinput class="item" type="text" v-model="formData.platform" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="活动时效" name="showdate" required>
					<uni-datetime-picker class="item" v-model="formData.showdate" type="datetimerange"
						rangeSeparator="至" />
				</uni-forms-item>
				<uni-forms-item label="库存" name="stock" required>
					<uni-easyinput class="item" type="number" v-model="formData.stock" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="消费金额" name="pay_fee" required>
					<uni-easyinput class="item" type="number" v-model="formData.pay_fee" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="返现金额" name="cash_back" required>
					<uni-easyinput class="item" type="number" v-model="formData.cash_back" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="品鉴规则" name="rule" required>
					<uni-easyinput class="item" type="text" maxlength="50" v-model="formData.rule"
						placeholder="请输入姓名" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="submit" @click="submit">确认提交</view>
		<view class="submit" @click="pay">支付</view>
	</view>
</template>
<script>
	import {
		getActivityAdd,apiCreateOrder
	} from '@/apirequest/api.js'
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					platform: null,
					showdate: [],
					stock: null,
					pay_fee: null,
					cash_back: null,
					rule: ''
				},
				rules: {
					platform: {
						rules: [{
							required: true,
							errorMessage: '请输入活动平台',
						}]
					},
					showdate: {
						rules: [{
							required: true,
							errorMessage: '请选择活动时效',
						}]
					},
					stock: {
						rules: [{
							required: true,
							errorMessage: '请输入库存',
						}]
					},
					pay_fee: {
						rules: [{
							required: true,
							errorMessage: '请输入消费金额',
						}]
					},
					cash_back: {
						rules: [{
							required: true,
							errorMessage: '请输入返现金额',
						}]
					},
					rule: {
						rules: [{
							required: true,
							errorMessage: '请输入品鉴规则',
						}]
					}

				}
			}
		},
		methods: {
			pay() {
				apiCreateOrder().then(res=>{
					const payParams = {}
					uni.requestPayment({
						...payParams,
						success(res2) {
							uni.showToast({
								title: '添加成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack()
							})
						},
						fail(err) {
							console.log(err, '支付--fail');
							if (err.errMsg === 'requestPayment:fail cancel') {
								uni.showToast({
									title: '支付已取消',
									icon: 'none'
								});
					
							}
						}
					});
				})
				
			},
			submit() {
				this.$refs.form.validate().then(values => {
					console.log('表单数据信息：', values);
					getActivityAdd(values).then(res => {
						if (res.code == 1) {
							const payParams = {}
							uni.requestPayment({
								...payParams,
								success(res2) {
									uni.showToast({
										title: '添加成功',
										icon: 'none'
									})
									setTimeout(() => {
										uni.navigateBack()
									})
								},
								fail(err) {
									console.log(err, '支付--fail');
									if (err.errMsg === 'requestPayment:fail cancel') {
										uni.showToast({
											title: '支付已取消',
											icon: 'none'
										});

									}
								}
							});

						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.activity {
		width: 100%;
		min-height: 100vh;
		background-color: #f4f4f4;

		.forms {
			width: 710rpx;
			background-color: #fff;
			margin: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;

			::v-deep .uni-forms {
				.uni-forms-item {
					margin-bottom: 20rpx;

					.uni-forms-item__content {
						.uni-easyinput__content {
							background-color: #f8f8f8 !important;
						}

						.uni-date-range {
							background-color: #f8f8f8 !important;
						}
					}
				}

			}
		}

		.submit {
			width: 600rpx;
			background-color: #fe8025;
			color: #fff;
			font-size: 32rpx;
			padding: 20rpx;
			margin: 20rpx auto;
			border-radius: 40rpx;
			text-align: center;
		}
	}
</style>